<template>
  <div class="divBox relative">
    <el-card class="box-card mt14" :body-style="{ padding: '20px 20px' }" shadow="never" :bordered="false">
      <!-- 搜索栏 -->
      <el-form :inline="true" :model="queryParams" class="demo-form-inline mb8">
        <el-form-item label="背景名称：">
          <el-input v-model="queryParams.aiBackgroundName" placeholder="请输入" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getList">查询</el-button>
          <el-button size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 新建按钮 -->
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新建背景</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table v-loading="loading" :data="list" style="width: 100%">
        <el-table-column label="编号" align="center" prop="id" width="80" />
        <el-table-column label="背景名称" align="center" prop="aiBackgroundName" />
        <el-table-column label="背景图片" align="center" prop="aiBackgroundUrl">
          <template slot-scope="scope">
            <el-image style="width: 60px; height: 60px" :src="scope.row.aiBackgroundUrl" :preview-src-list="[scope.row.aiBackgroundUrl]" />
          </template>
        </el-table-column>
        <el-table-column label="默认" align="center" prop="isDefault">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDefault == 1" type="success">是</el-tag>
            <el-tag v-else type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" style="color: #f56c6c" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50, 100]"
        @current-change="getList"
        @size-change="getList"
        class="mt14"
      />
      <!-- 新建/编辑弹窗 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="背景名称" prop="aiBackgroundName">
            <el-input v-model="form.aiBackgroundName" placeholder="请输入背景名称" />
          </el-form-item>
          <el-form-item label="背景图片" prop="aiBackgroundUrl">
            <div class="upLoadPicBox acea-row" @click="modalPicTap(false)">
              <div v-if="form.aiBackgroundUrl" class="pictrue"><img :src="form.aiBackgroundUrl" style="width: 60px; height: 60px" /></div>
              <div v-else class="upLoad">
                <i class="el-icon-camera cameraIconfont" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="默认背景：" prop="isDefault">
            <el-checkbox v-model="form.isDefault" :true-label="1" :false-label="0">设为默认</el-checkbox>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getBackgroundListApi, addBackgroundApi, updateBackgroundApi, deleteBackgroundApi, getBackgroundDetailApi } from '@/api/model';
export default {
  name: 'BackPage',
  data() {
    return {
      loading: false,
      list: [],
      total: 0,
      queryParams: {
        name: '',
        pageNum: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      dialogTitle: '',
      form: {
        id: undefined,
        aiBackgroundName: '',
        aiBackgroundUrl: '',
        isDefault: 0,
      },
      rules: {
        name: [{ required: true, message: '请输入背景名称', trigger: 'blur' }],
        image: [{ required: true, message: '请上传背景图片', trigger: 'change' }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getBackgroundListApi(this.queryParams).then((res) => {
        console.log(res);
        this.list = res.list;
        this.total = res.total;
        this.loading = false;
      });
    },
    resetQuery() {
      this.queryParams = { name: '', pageNum: 1, pageSize: 10 };
      this.getList();
    },
    handleAdd() {
      this.dialogTitle = '新建背景';
      this.form = { id: undefined, aiBackgroundName: '', aiBackgroundUrl: '', isDefault: 0 };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogTitle = '编辑背景';
      this.form = { ...row };
      if (typeof this.form.isDefault === 'undefined') this.form.isDefault = 0;
      this.dialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm('是否确认删除该背景？', '提示', { type: 'warning' }).then(() => {
        console.log(row, 140);
        // TODO: 删除接口
        deleteBackgroundApi({ id: row.id }).then(() => {
          this.$message.success('删除成功');
          this.getList();
        });
      });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // TODO: 新建/编辑接口
          if (this.form.id) {
            updateBackgroundApi(this.form).then(() => {
              this.$message.success('编辑成功');
              this.dialogVisible = false;
              this.getList();
            });
          } else {
            addBackgroundApi(this.form).then(() => {
              this.$message.success('新建成功');
              this.dialogVisible = false;
              this.getList();
            });
          }
        }
      });
    },
    modalPicTap(multiple) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (!img) return;
          console.log(img, 148);
          this.$set(_this.form, 'aiBackgroundUrl', img[0].sattDir);
        },
        multiple,
        'content',
      );
    },
  },
};
</script>

<style scoped>
.footer {
  text-align: center;
  color: #999;
  margin-top: 40px;
}
.upLoadPicBox {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.pictrue img {
  width: 100px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.upLoad {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 28px;
}
</style>